<!--  -->
<template>
  <div class="setting">
    <van-cell title="通用" is-link to="/commonSet" />
    <van-cell title="关于" is-link to="/about" />
    <!-- color="#ee0a24" -->
    <van-button plain block @click="logout">注销</van-button>
    <van-popup
      v-model:show="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
      closeable
    >
      <div class="popup">
        <div>是否注销？</div>
        <van-button plain block @click="dologout">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "setting",
  setup() {
    const router = useRouter();
    const data = reactive({
      show: false,
    });
    const { proxy } = getCurrentInstance();
    onBeforeMount(() => {});
    onMounted(() => {});
    const refData = toRefs(data);
    //注销登录
    const logout = () => {
      data.show = true;
    };
    const dologout = () => {
      data.show = true;
      router.push({ path: "/login" });
      proxy.$storage._session.remove("token");
    };

    return {
      ...refData,
      logout,
      dologout,
    };
  },
};
</script>
<style scoped lang="scss">
.setting {
  background-color: #f5f4f9;
  height: 90vh;
  text-align: left;
  ::v-deep {
    .van-cell {
      margin-bottom: 10px;
    }
  }
  .popup {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .van-button {
      position: fixed;
      bottom: 0px;
      width: 100%;
    }
  }
}
</style>
